<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      v-model:query="query"
      title="部门"
      ref="tableRef"
      :isTreeTable="true"
      :isExpandAll="true"
      :queryFormHeaders="queryFormHeaders"
      :table="table"
      :pagination="false"
      :tableColumns="tableColumns"
      :showTableIndex="false"
      :operatorColumnWidth="300"
      :baseUrl="urls.API_URL_BACKSTAGE_DEPARTMENT_MANAGE"
      v-model:form="form"
      :formRules="formRules"
      :formHeader="formHeader"
      @beforeAddRow="beforeAddRow"
    >
      <template #table_operator_left="scope">
        <el-button type="primary" size="small" icon="Plus" plain @click="addRowFromCurrentRow(scope.row.id)">添加</el-button>
      </template>
      <!-- <template #table_column_name="scope">
        {{ scope.row.name }}
      </template> -->
      <!--表单提交的自定义内容 -->
      <template #dialog_form_parentId>
        <!-- 部门选择下拉框 -->
        <SysDepartmentTreeSelect v-model="form['parentId']" :data="table.data" clearable selectWidth="300px" />
      </template>
    </PerfectTableComponent>
  </div>
</template>

<script lang="ts" setup>
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import SysDepartmentTreeSelect from '@/components/auth/SysDepartmentTreeSelectComponent.vue';
import { provide, reactive, ref } from 'vue';
import Request from '@/api/request/request';
import useTableList from '@/api/hooks/useTableList';
import type { Department } from '@/types/interface/auth_interface';
import type { FormHeader, ResponseData, TableColumn } from '@/types/interface/base_interface';

import urls from '@/api/request/urls';

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_DEPARTMENT_TREE,
  false
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([
  // 查询表单
  {
    prop: 'name',
    label: '部门名称'
  }
]);

//表格==========================================================
// 表格插件ref对象
const tableRef = ref();

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '部门名称',
    prop: 'name',
    fixed: true,
    width: 250,
    align: 'left'
  },
  {
    label: '员工人数',
    prop: 'userNumber',
    width: 120
  },
  {
    label: '排序',
    prop: 'sort',
    width: 150
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]);
//表单==========================================================
//表单对象
const form = ref<Department>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([
  {
    label: '上级部门',
    prop: 'parentId',
    type: 'custom'
  },
  {
    label: '部门名称',
    prop: 'name'
  },
  {
    label: '排序',
    prop: 'sort'
  }
]);
// 表单验证规则，用于全局表单验证
const formRules = reactive({
  name: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 30,
      message: '必须在1-30个字符之间',
      trigger: 'blur'
    }
  ],
  sort: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur'
    }
  ]
});
//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    sort: 0
    // parentId: id
  };
};
//在当前行上添加新的一行
const addRowFromCurrentRow = async (departmentId: number): Promise<void> => {
  console.log(departmentId);
  form.value = {
    sort: 0,
    parentId: departmentId
  };
  //提供给初始化值
  tableRef.value.openDialog('post');
};
</script>
<style lang="scss" scoped></style>
